<style scoped="scoped">

</style>
<template>
  <div>
    <el-dialog
      title="打印"
      width="900"
      :visible.sync="showModal"
    >
      <div class="pick-list-content-box"
           v-for="(item, index) in detail"
           :key="index"
           v-show="index < 1"
      >
        <div class="pick-list-content" style="width: 100%;border: 1px solid #999;">
          <div class="pick-content-title"
               style="width: 100%;height: 50px;text-align: center;font-size: 18px;font-weight: 600;line-height: 49px;border-bottom: 1px solid #999;">
            <span>用户自提单</span>
          </div>
          <div class="pick-content-service" style="padding: 5px 15px;line-height: 30px;">
            <h4 style="margin: 10px 0px 2px 0px">自提信息</h4>
            <table class="content-service" style="width: 100%;">
              <tr>
                <td width="25%">用户名称:<span>{{item.consigneName}}</span></td>
                <td width="25%">用户电话: <span>{{item.consignePhone}}</span></td>
                <td width="25%">总包件: <span>{{item.totalPackage}}</span>件</td>
                <td width="25%">自提日期: <span>{{item.start | unixTimestampFilter('YYYY-MM-DD')}}</span></td>
              </tr>
            </table>
            <table class="pick-content-table" style="width: 100%">
              <thead>
              <tr>
                <th>#</th>
                <th>服务订单号</th>
                <th>预约时段</th>
                <th>产品名称</th>
                <th>包件名称</th>
                <th>数量</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(t, tIndex) in item.customArr" :key="tIndex">
                <td :rowspan="item.customArr.length" v-if="tIndex == 0">{{index + 1}}</td>
                <td :rowspan="item.customArr.length" v-if="tIndex == 0">{{item.orderNo}}</td>
                <td :rowspan="item.customArr.length" v-if="tIndex == 0">
                  <div style="width: 80px">{{item.timeInterval | filterDataBaseDictionary}}</div>
                </td>
                <td :rowspan="t.PackageLength" v-if="t.isFirstPackage">
                  {{t.productName}}
                </td>
                <td>
                  {{t.name}}
                </td>
                <td>{{t.totalPackage}}</td>
              </tr>
              </tbody>
            </table>
            <h4 style="margin: 10px 0px 2px 0px">用户确认</h4>
            <table style="width: 100%;">
              <tr>
                <td style="width: 40%; padding-left: 18px">经办客服：{{user}}</td>
                <td>用户签字：</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="hide">取 消</el-button>
    <el-button type="primary" @click="print()">打 印</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import {getLodop, validateLODOP, copy} from '@/utils'
import {unixTimestampFilter, filterDataBaseDictionary} from '@/filters'
import {getUserInfo} from '@/utils/auth.js'
let LODOP = null
export default {
  name: 'PrintModal',
  props: {
    idArr: {
      type: Array,
      required: true
    }
  },
  filters: {
    unixTimestampFilter,
    filterDataBaseDictionary
  },
  data() {
    return {
      showModal: false,
      user: getUserInfo('name'),
      detail: {}
    }
  },
  created() {
    getLodop().then(result => {
      LODOP = result
    })
  },
  mounted() {
    this.setStyle()
  },
  methods: {
    getDetail() {
      this.$ajax.post('/ms-terminal-order/user-pick-up/get-user-pick-up-details', this.idArr).then(response => {
        if (!response.data) {
          return
        }
        let data = copy(response.data, true)
        data.forEach(item => {
          item.customArr = [] // 组装成两层结构
          item.userPickUpDetailsProductList.forEach(p => {
            p.userPickUpDetailsPackageList.forEach((v, n) => {
              if (n === 0) {
                v.isFirstPackage = true // 是否为包的第一条数据
              } else {
                v.isFirstPackage = false
              }
              v.PackageLength = p.userPickUpDetailsPackageList.length
            })
            item.customArr = item.customArr.concat(p.userPickUpDetailsPackageList)
          })
        })
        console.log('data', data)
        this.detail = data
      })
    },
    show() {
      this.showModal = true
      this.setStyle()
      this.$nextTick(_ => {
        this.getDetail()
      })
    },
    hide() {
      this.showModal = false
    },
    print() {
      this.setStyle()
      if (validateLODOP(LODOP)) {
        $(this.$el).find('.pick-list-content-box').each((index, v) => {
          // LODOP.SET_PRINT_PAGESIZE(1, 2180, 1400, 'A4')
          LODOP.ADD_PRINT_HTM('1mm', '2mm', '203mm', '130mm', v.innerHTML)
          LODOP.SET_PRINT_STYLEA(0, 'ShowBarText', 0)
          LODOP.NewPage()
        })
        LODOP.SET_PREVIEW_WINDOW(1, 0, 0, '900px', '600px', '') // 设置打印预览窗口的大小
        LODOP.SET_LICENSES('成都居家通物流有限责任公司', 'B54155199971EA1DB53ED53340530EFE', '', '')
        this.hide()
        LODOP.PREVIEW()
        this.labelRecord()
      }
    },
    setStyle() {
      this.$nextTick(_ => {
        setTimeout(_ => {
          $(this.$el).find('.pick-content-table').each((index, v) => {
            v.setAttribute('style', 'width: 100%;border-collapse:collapse;')
            $(v).find('th').each((index2, v2) => {
              v2.setAttribute('style', 'text-align: center;border: 1px solid #999;padding: 0px 2px;')
            })
            $(v).find('td').each((index2, v2) => {
              v2.setAttribute('style', 'text-align: center;border: 1px solid #999;padding: 0px 2px;')
            })
          })
        }, 500)
      })
    },
    labelRecord() {
      this.$ajax.post('/ms-warehouse-order/user-pick-up/get-user-pick-up-print', this.idArr).then(response => {
        this.$emit('refresh')
      })
    }
  }
}
</script>
